<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(data) {
      this.chart.setOption(
              {
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  data: data.legend,
                  top: '10%',
                  right: '20%',
                  orient: 'horizontal',
                  x: 'right',
                  textStyle: {
                    fontSize: '12',
                    fontFamily: 'PingFang SC',
                    fontWeight: 500,
                    color: '#FFFFFF'
                  }
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: 0,
                  containLabel: true
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: data.xAxis,
                  axisLabel: {
                    interval: 0,  //设置 X 轴数据间隔几个显示一个，为0表示都显示
                    textStyle: {
                      interval: 0,//横轴信息全部显示
                      show:true,
                      fontSize: 12,
                      fontFamily: 'PingFang SC',
                      fontWeight: 500,
                      color: '#FFFFFF'
                    }
                  }
                },
                yAxis:[
                  {
                    type: 'value',
                     position: 'left',
                     min: 0, // 指定最小值
                     max: 6000, // 指定最大值
                    axisLine: {
                      show: true,
                      onZero: false
                    },
                    axisLabel: {
                      textStyle: {
                        show: true,
                        fontSize: 12,
                        fontFamily: 'PingFang SC',
                        fontWeight: 500,
                        color: '#FFFFFF'
                      }
                    },
                    splitLine: {
                      lineStyle: {
                        type: 'dashed',
                        color: '#21357B'
                      },
                      show: true
                    }
                  },
                  {
                    type: 'value',
                    position: 'right', // 将坐标轴显示在右侧
                     min: 0, // 指定最小值
                     max: 200, // 指定最大值
                    axisLine: {
                      show: true,
                      onZero: false
                    },
                    axisLabel: {
                      textStyle: {
                        show: true,
                        fontSize: 12,
                        fontFamily: 'PingFang SC',
                        fontWeight: 500,
                        color: '#FFFFFF'
                      },
                    },
                    splitLine: {
                      lineStyle: {
                        type: 'dashed',
                        color: '#21357B'
                      },
                      show: true
                    }
                  }
                ],               
                
                series: [
                  {
                    name: '成交额',
                    type: 'line',
                    stack: 'A',
                    data: data.yAxis.volume,
                    yAxisIndex: 0,
                    itemStyle: {
                      label : {
                        show: true  
                      },
                      lineStyle:{
                        color: '#B9A4FB'// 折线颜色设置为0，即只显示点，不显示折线                      
                    }
                    }
                  },
                  {
                    name: '成交量',
                    type: 'line',
                    stack: 'B',
                    data: data.yAxis.turnover,
                    yAxisIndex: 1,
                    itemStyle: {
                      label : {
                        show: true  
                      },
                      lineStyle:{
                        color: '#7BFCFE'// 折线颜色设置为0，即只显示点，不显示折线                      
                    }
                    }
                  }

                ]
              }
            )
          }
        }
}
</script>
